<template>
	<view class="cell">
		<image class="cellheaderimg" :src="info.banner"></image>
		<view class="cell-header">
			<view class="cell-header-1">
				<view class="cell-header-title">{{info.name}}</view>
				<view class="cell-header-cennt">{{info.brief}}</view>
			</view>
		</view>
		<view class="cell-nav">
			<view  @click="urlClick('/pages/index/index',0)">数独首页</view>
			<view @click="urlClick('/pages/record/record?cid='+info.id,1)">答题记录</view>
			<view @click="likeClick(1)" v-if="likeinfo">取消喜欢</view>
			<view @click="likeClick(0)" v-else>喜欢此题</view>
			<view><button class="sharebutton share"  open-type="share">分享好友</button></view>
		</view>
		
		
			
		<view class="cell-title1">请选择试题难度</view>
		<view class="cell-list">
			
			<view class="cell-list-view"
				@click="urlClick('/pages/questions/questions?id='+item.questions.id+'&lid='+item.id+'',2,item.questions)"
				v-if="item.questions"
			 v-for="(item,index) in level">
				<view class="cell-list-view-l">{{index+1}}</view>
				<view class="cell-list-view-title">{{item.name}}</view>
				<view class="cell-list-view-body">总{{item.questionscount}}题/已答{{item.questionsusercount}}题</view>
				<image class="cell-list-view-right" src="../../static/icon/right.png"></image>
				
			</view>
			
			
		</view>
		<view class="rankingbag" @click="myrankingClick()">
			<view class="rankingbag-one">
				<view class="rankingbag-one-one"  v-if="myrankinghide==1" >{{rankinginfo.mingci.mingci}}</view>
				<image class="rankingbag-one-oneimgage"  v-if="myrankinghide==0"  src="../../static/icon/biyan01.png"></image>
				<view class="rankingbag-one-two">我的排名</view>
			</view>
			<view class="rankingbag-two">
				<image :src="rankinginfo.user.avatar"></image>
			</view>
			<view class="rankingbag-three">
				<view>答题次数：
					<image  v-if="myrankinghide==0"  src="../../static/icon/biyan.png"></image>
					<text  v-if="myrankinghide==1">{{rankinginfo.mingci.count}}</text>
				次</view>
				<view>平均耗时：
					<text  v-if="myrankinghide==1" >{{rankinginfo.mingci.average}}</text>
					<image v-if="myrankinghide==0" src="../../static/icon/biyan.png"></image>
				秒</view>
			</view>
			
			<image class="rankingbag-five" src="https://shuduxiaochengxu.oss-cn-beijing.aliyuncs.com/storage/ranking/1.png"></image>
		</view>
		<view class="seniority">
			<view class="seniority-title">
				<view @click="rankingClick(0)" :class="rankingshow  == 0 ? 'seniority-acity' : ''">历史排名</view>
				<view @click="rankingClick(1)" :class="rankingshow  == 1 ? 'seniority-acity' : ''">最新成绩</view>
			</view>
			<!-- <view class="seniority-title">最新成绩</view> -->
			
			<view class="seniority-list" v-if="rankingshow == 1">
				<view class="seniority-list-view" v-for="(item,index) in questionsuser">
					<image :src="item.user.avatar"></image>
					<view class="seniority-list-view-nickname">{{item.user.nickname}}</view>
					<view class="seniority-list-view-level">{{item.lname}}级别</view>
					<view class="seniority-list-view-date">{{item.time}}秒</view>
				</view>
		
			</view>
			
			<view class="seniority-list" v-if="rankingshow == 0">
			
				<view class="seniority-list-view" v-for="(item,index) in rankinglist">
					<image class="rankingmingc" v-if="index == 0" src="https://shuduxiaochengxu.oss-cn-beijing.aliyuncs.com/storage/ranking/1.png"></image>
					<image class="rankingmingc" v-if="index == 1" src="https://shuduxiaochengxu.oss-cn-beijing.aliyuncs.com/storage/ranking/2.png"></image>
					<image class="rankingmingc" v-if="index == 2" src="https://shuduxiaochengxu.oss-cn-beijing.aliyuncs.com/storage/ranking/3.png"></image>
					<image v-if="index > 2" :src="item.user.avatar"></image>
					
					<view class="seniority-list-view-nickname">{{item.user.nickname}}</view>
					<view class="seniority-list-view-ringhr">每题消耗{{item.average}}/秒</view>
				</view>	
			</view>
		</view>
		<view style="height: 60rpx;"></view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cid  : '',
				info : {},
				level: {},
				likeinfo : {},
				questionsuser  : [],
				rankinglist  : [],
				rankingshow  : 0,
				page : '',
				rewardedVideoAd  : '',
				rankinginfo    : [],
				myrankinghide  : 0
			}
		},
		onLoad(e) {
			console.log(e);
			this.cid = e.cid;
			this.page = 'pages/cell/cell?cid='+e.cid;
			this.getall();
			this.likedetails();
			if(wx.createRewardedVideoAd){
			    this.rewardedVideoAd = wx.createRewardedVideoAd({ adUnitId: 'adunit-b06519999ca4fa67' })
			    this.rewardedVideoAd.onLoad(() => {
					
			        console.log('onLoad event emit')
			    })
			    this.rewardedVideoAd.onError((err) => {
			        console.log('onError event emit', err)
			    })
			    this.rewardedVideoAd.onClose((res) => {
					this.myrankinghide  = 1;
			        console.log('onClose event emit', res)
			    })
			}
		},
		methods: {
			myrankingClick(){
				let  that=  this;
				if(that.myrankinghide ==0){
					uni.showModal({
						title: '提示',
						content: '观看广告可查看实时排名！',
						success: function (res) {
							if (res.confirm) {
								that.rewardedVideoAd.show();
							}
						},
					})
					
				}
			},
			rankingClick(e){
				this.rankingshow  = e;
			},
			likeClick(e){
				let that = this;
				if(e == 0){
					var prames  = {
						'cid': this.cid,
					}
					that.$like.setcollect({'data':JSON.stringify(prames)}).then(res=>{
						uni.showToast({
							title: res.msg,
							icon: "none" ,
						});
						that.likedetails();
						console.log(res);
					})
				}else{
					that.$like.setdel({'ids':that.likeinfo.id}).then(res=>{
						uni.showToast({
							title: res.msg,
							icon: "none" ,
						});
						that.likedetails();
					})
				}
				
			},
			likedetails(){
				let that =  this;
				console.log(that.id);
				that.$like.getdetails({'cid':that.cid}).then(res=>{
					that.likeinfo  = res.data.info;
				})
			},
			urlClick(e,index = 0,id = ''){
				if(index == 0){
					uni.switchTab({
						url : e
					})
				}else if(index  ==1){
					console.log(e);
					uni.navigateTo({
						url:e
					})
				}else{
					
					
					if(id){
						uni.navigateTo({
							url:e
						})
					}else{
						uni.showToast({
							title: '暂无试题',
							icon: "none" ,
						});return;
					}
					console.log(id);
				}
			},
			getall(){
				let that  = this;
				that.$questions.getQuestionsClassifydetails({'ids':that.cid}).then(res=>{
					that.info  = res.data.info;
					uni.setNavigationBarTitle({
					    title: that.info.name
					})
				})
				that.$questions.getQuestionsLevel({'cid':that.cid}).then(res=>{
					that.level = res.data.list;
					console.log(res);
				})
				that.$questions.getQuestionsuser({'page':1,'limit':12,'cid':this.cid,'user_id':'all','bid':'undefined'}).then(res=>{
					that.questionsuser = res.data.list;
				})
				that.$questions.getranking({'bid':undefined,'cid':that.cid}).then(res=>{
					that.rankinglist  = res.data.list;
					console.log(res);
				})
				that.$questions.getrankinginfo({'bid':undefined,'cid':that.cid}).then(res=>{
					that.rankinginfo  =res.data.info;
				})
			}
		},
		onShareAppMessage() {
			let that  =  this;			
			return {
				 title: '您的朋友向您推荐'+this.info.name,
				 path: this.path, // 路径，传递参数到指定页面。
		　　　　  imgUrl: ''     //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支 
			}
		}
	}
</script>

<style lang="less">
	.cell {
		width: 750rpx;
		min-height: 100vh;
		background-color: #f6f9f9;
		.cellheaderimg {
			width: 750rpx;
			height: 400rpx;
			display: block;
		}
		.cell-header {
			width: 100%;
			min-height: 200rpx;
			background-color: #fff;
			.cell-header-1 {
				padding: 20rpx;
				.cell-header-title {
					color: #333333;
					font-size: 34rpx;
					font-weight: bold;
				}
				.cell-header-cennt {
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;
					padding-top: 20rpx;
					margin-bottom: 20rpx;
					text-align: justify;
				}
			}
		}
		.cell-title1 {
			padding-left: 20rpx;
			color: #666666;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
		}
		.cell-nav {
			display: flex;
			height: 100rpx;
			line-height: 100rpx;
			view {
				flex: 1;
				text-align: center;
				color: #fff;
				background-color: #ed8346;
			}
			view:nth-child(2){
				background-color: #ff6c87;
			}
			view:nth-child(3){
				
				background-color: #f7522d;
			}
			view:nth-child(4){
				background-color: #7289ff;
			}
		}
		.cell-list {
			background-color: #fff;
			padding-bottom: 30rpx;
			padding-top: 30rpx;
			.cell-list-view {
				width: 690rpx;
				margin: auto;
				height: 100rpx;
				display: flex;
				padding-bottom: 22rpx;
				padding-top: 22rpx;
				border-bottom: 2rpx solid #e3e3e3;
				.cell-list-view-l {
					background: #e3e3e3;
					width: 80rpx;
					height: 80rpx;
					border-radius: 20rpx;
					text-align: center;
					line-height: 80rpx;
					margin-top: 10rpx;
					color: #666666;
				}
				.cell-list-view-title {
					padding-left: 20rpx;
					line-height: 90rpx;
					font-size: 32rpx;
					width: 282rpx;
				}
				.cell-list-view-right {
					margin-left: auto;
					width: 52rpx;
					height: 56rpx;
					margin-top: 26rpx;
				}
				.cell-list-view-body {
					color: #424242;
					font-size: 30rpx;
					line-height: 108rpx;
					text-align: right;
					width: 246rpx;
				}
			}
			
		}
		.seniority {
			min-height: 10vh;
			background-color: #fff;
			margin-top: 20rpx;
			padding-top: 20rpx;
			
			.seniority-title {
				padding-top: 10rpx;
				padding-left: 20rpx;
				font-size: 38rpx;
				display: flex;
				justify-content: center;
				padding-bottom: 30rpx;
				view {
					line-height: 100rpx;
					position: relative;
					flex: 1;
					text-align: center;
				}
				.seniority-acity {
					color: #7289ff;
				}
				.seniority-acity::after {
					content: ' ';
					position: absolute;
					width: 142rpx;
					height: 4rpx;
					left: 110rpx;
					border-bottom: 2rpx solid #7289ff; 
					margin-top: 92rpx;
				}
			}
			.seniority-list {
				width: 690rpx;
				margin: auto;
				
				.seniority-list-view{
					display: flex;
					line-height: 120rpx;
					margin-bottom: 48rpx;
					image {						
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}
					.rankingmingc  {
						width: 100rpx;
						height: 100rpx;
						font-size: 42rpx;
						text-align: center;
						padding-top: 4rpx;
					}
					.seniority-list-view-nickname {
						flex: 3;
						font-size: 34rpx;
						padding-left: 20rpx;
					}
					.seniority-list-view-level {
						flex: 1;
						font-size: 28rpx;
						color: #666666;
					}
					.seniority-list-view-date {
						font-size: 32rpx;
						flex: 1;
						text-align: right;
					}
				}
			}
			
		}
		.seniority-list-view-ringhr {
			font-size: 28rpx;
			color: #666666;
		}
	}
	.share {
		color: #fff;
		line-height: 102rpx;
	}
	
</style>
